<template>
	<view class="u-rela">
		<view class="page-top">
			<!-- 自定义头部start -->
			<customHeader :title="dataList.name"></customHeader>
			<!-- 自定义头部end -->
			<image class="img-bg" src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/recruit/img-bg.png"
				mode="widthFix"></image>
			<div class="content-wrap" :style="{PaddingTop:customHeader.bottom+'px'}">
				<!-- 企业信息 -->
				<div class="page-head-wrap u-flex u-col-top">
					<div class="img-wrap u-flex u-row-center">
						<u-image :src="dataList.logo == '' ? 'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/recruit/company-img.png' : dataList.logo" width="66rpx" height="66rpx"></u-image>
					</div>
					<div class="right u-m-l-20 u-flex-1">
						<div class="u-flex">
							<view class="title">{{ dataList.name }}</view>
						</div>
						<view class="u-font-28 u-m-t-10">
							{{ dataList.scale }}·{{ dataList.industry }}
						</view>
						<div class="u-flex u-m-t-10">
							<div class="real-name">
								<image class="icon-certy" src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/recruit/icon-certy.png" mode="widthFix">
								</image>
								实名认证
							</div>
							<div class="enter-name">
								<image class="icon-certy" src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/recruit/icon-certy.png" mode="widthFix">
								</image>
								企业认证
							</div>
						</div>
						<div class="u-flex u-flex-wrap u-m-t-30">
							<text class="label-item" v-for="(item2,index) in dataList.tag">{{item2}}</text>
						</div>
					</div>
				</div>
				<!-- tab -->
				<div class="tab-wrap u-m-t-30">
					<!-- tab切换 -->
					<u-tabs height="100" font-size="34" active-color="#000000" inactive-color="#999999" bar-width="80"
						bar-height="14"
						:bar-style="{borderRadius:'14rpx',backgroundColor:'#07C160',bottom:'20rpx',zIndex:'0'}"
						:active-item-style="{zIndex:1}" :list="list" :is-scroll="false" :current="current"
						@change="change">
					</u-tabs>
					<div class="line"></div>
					<!-- 公司信息 -->
					<template v-if="current==0">
						<div class="u-p-30 u-m-t-10">
							<div class="u-font-32 blod">公司简介</div>
							<div class="u-font-28 u-content-color">
								{{ dataList.content }}
								<!-- 公司是一家从事农资批发与技术推广为一体的综合性
								公司。因业务发展需求诚招业务经理数名。需会开车，
								善交流。有农资销售业务经验者优先。期待您的加入
								共创辉煌。 -->
							</div>
						</div>
						<div class="line"></div>
						<div class="u-p-30">
							<!-- 工作地址 -->
							<view class="u-font-32 blod">
								工作地址
							</view>
							<div class="u-flex u-font-28 u-content-color u-m-t-10">
								<image class="icon-add" src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/recruit/icon-add.png" mode="widthFix">
								</image>
								<text>{{ dataList.address }}</text>
							</div>
							<div class="btn-map u-m-t-20">查看地图</div>
						</div>
					</template>
					<!-- 在招职位 -->
					<template v-else>
						<!-- 职位列表 -->
						<navigator :url="`/pages/recruit/job/zwdetail?job_id=${item.job_id}`" class="job-item" v-for="(item,index) in jobList" :key="index">
							<view class="title">{{item.title}}</view>
							<view class="u-flex label-wrap">
								<text v-for="(item2,index2) in item.tag" :key="index2">{{item2}}</text>
							</view>
							<view class="u-flex u-m-t-28">
								<image class="icon-7"
									src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/recruit/icon-7.png"
									mode="widthFix"></image>
								<text class="u-font-24 u-content-color">{{ item.company_name }}</text>
							</view>
							<view class="salary">{{item.salary}}</view>
						</navigator>
					</template>
				</div>

			</div>
		</view>
		<!-- 找job底部操作栏 -->
		<div class="footer-wrap">
			<div v-if="footerType=='job'" class="fixed-wrap u-flex u-row-between">
				<navigator url="/pages/index/index" open-type="switchTab" class="u-flex u-flex-col">
					<image class="img" src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/recruit/icon-home.png" mode="widthFix"></image>
					<text class="u-font-24">首页</text>
				</navigator>
				<div class="u-flex u-flex-col u-m-l-50">
					<image class="img" src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/recruit/icon-tel.png" mode="widthFix"></image>
					<text class="u-font-24">电话</text>
				</div>
				<div class="btn btn-online u-m-l-60">在线聊</div>
				<div class="btn btn-apply u-m-l-20">申请职位</div>
			</div>
			<div v-if="footerType=='worker'" class="fixed-wrap worker-wrap u-flex u-row-between">
				<navigator url="/pages/recruit/editCompany" class="btn btn-online u-m-r-20">修改企业</navigator>
				<navigator :url="`/pages/recruit/worker/fbzw?company_id=${dataList.company_id}`" class="btn btn-apply u-m-l-20">发布职位</navigator>
			</div>
		</div>

		<u-popup v-model="show" mode="center" border-radius="30">
			<view class="popContent">
				<view class="pop_title">
					您还没有公司信息哦!
				</view>
				<view class="pop_btn">
					<span @click="toeditCompany">去创建</span>
					<span @click="toRecruit_index">取消</span>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import customHeader from '@/components/customHeader.vue'
	import customHeaderMixin from '@/mixins/customHeaderMixin.js'
	export default {
		components: {
			customHeader
		},
		mixins: [customHeaderMixin],
		data() {
			return {
				show:false,
				footerType:'worker',
				salaryList: [
					// "五险", "年底双薪", "加班补助", "话补", "年终奖", "免费培训", "晋升空间"
					],
				list: [
					{
					name: '公司信息'
				}, {
					name: '在招职位'
				},
				],
				current: 0,
				jobList: [
					
				],
				
				
				dataList:{},
				
			}
		},
		onLoad(query){
			console.log(query);
			//属性type:值job-找工作时进入的|值worker-招人时进入的
			if(query.type){
					this.footerType=query.type
			}
			if(query.company_id){
				// 应聘者查看某个公司信息
				this.get_recruit_showCompany(query.company_id)
			}else{
				// 公司详情
				this.get_recruit_companyDetails()
			}
			
		},
		methods: {
			//
			toeditCompany(){
				uni.navigateTo({
					url:`/pages/recruit/editCompany`
				})
			},
			
			// 点击取消回到首页
			toRecruit_index(){
				uni.navigateTo({
					url:'/pages/recruit/index'
				})
			},
			
			change(index) {
				this.current = index;
				if(this.jobList.length == 0 && this.current == 1){
					uni.showToast({
						icon:'none',
						title:'暂无职位',
						duration:2000
					})
				}
			},
			
			
			// 公司详情
			get_recruit_companyDetails(){
				uni.showLoading({
					title: '加载中...'
				});
				this.$http({
					url:this.api.recruit_companyDetails,
					method:'GET'
				}).then(res=>{
					if(res.code == 1){
						uni.hideLoading();
						if(res.data.company_id == 0){
							this.show = true
							return
						}
						this.dataList = res.data
						
						this.get_recruit_recruitList(res.data.company_id)
					}
				})
			},
			
			// 岗位列表,此处需要传company_id,展示我的企业的招聘信息
			get_recruit_recruitList(company_id){
				uni.showLoading({
					title: '加载中...'
				});
				this.$http({
					url:this.api.recruit_recruitList,
					method:'GET',
					data:{
						company_id
					}
				}).then(res=>{
					if(res.code == 1){
						uni.hideLoading();
						this.jobList = res.data.list
					}
				})
			},
			
			// 应聘者查看某个公司信息
			get_recruit_showCompany(company_id){
				uni.showLoading({
					title: '加载中...'
				});
				this.$http({
					url:this.api.recruit_showCompany,
					method:'GET',
					data:{
						company_id
					}
				}).then(res=>{
					if(res.code ==1){
						uni.hideLoading();
						this.dataList = res.data
						this.get_recruit_recruitList(res.data.company_id)
					}
				})
			}
		},
		
	}
</script>

<style scoped lang="scss">
	.line{
		width:750rpx;
		height: 1px;
		background: #DDDDDD;
	}
	.page-top {
		position: relative;
		width: 750rpx;

		.img-bg {
			width: 100%;
			height: 600rpx;
			position: absolute;
			z-index: 0;
			left: 0;
			top: 0;
		}

		.content-wrap {
			position: relative;
			z-index: 2;
			left: 0;
			top: 0;
			padding: 30rpx;

			.page-head-wrap {
				margin-top: 40rpx;
				color: #fff;

				.title {
					font-size: 34rpx;
					font-weight: 700;
					max-width: 440rpx;
				}

				.text-bg {
					background: #F3F3F3;
					border-radius: 17rpx;
					padding: 8rpx 12rpx;
					font-size: 20rpx;
					margin-left: 6rpx;
				}

				.icon-7 {
					width: 28rpx;
					height: 28rpx;
					margin-right: 10rpx;
				}


				.label-item {
					padding: 8rpx 12rpx;
					margin-right: 20rpx;
					margin-bottom: 20rpx;
					background: rgba(255, 255, 255, 0.2);
					border: 1px solid rgba(255, 255, 255, 0.4);
					border-radius: 4rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}

				.img-wrap {
					width: 120rpx;
					height: 120rpx;
					background: #FFFFFF;
					border: 1px solid #EAF8FF;
					border-radius: 50%;
				}

				.icon-certy {
					width: 22rpx;
					height: 22rpx;
					margin-right: 8rpx;
				}

				.real-name {
					padding: 4rpx 12rpx;
					background: #07C140;
					border-radius: 17rpx;
					font-size: 24rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 10rpx;
				}

				.enter-name {
					padding: 4rpx 12rpx;
					background: #FFB502;
					border-radius: 17rpx;
					font-size: 24rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 10rpx;
				}



			}
		}

		.tab-wrap {
			margin: 0 auto;
			width: 710rpx;
			background: rgba(255, 255, 255, 0.75);
			border-radius: 15rpx;
			overflow: hidden;
		}

		.line {
			width: 100%;
			height: 1px;
			background-color: #EEEEEE;
		}

		.icon-add {
			width: 48rpx;
			height: 48rpx;
			margin-right: 16rpx;
		}

		.btn-map {
			width: 160rpx;
			height: 44rpx;
			background: #E6F8EE;
			border: 1px solid rgba(7, 193, 96, 0.2);
			border-radius: 20rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #07C160;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	// 找工作底部
	.footer-wrap {
		width: 750px;
		height: 120rpx;
		position: relative;

		.img {
			width: 42rpx;
			height: 42rpx;
			margin-bottom: 10rpx;
		}

		.fixed-wrap {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 750rpx;
			height: 120rpx;
			background: #FFFFFF;
			padding: 0 20rpx;
			z-index: 9;



			.btn {
				width: 240rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
			}

			.btn-online {
				background: #E6F8EE;
				border: 1px solid rgba(7, 193, 96, 0.2);
				border-radius: 10rpx;
				color: #07C160;
			}

			.btn-apply {
				background: #07C160;
				color: #FFFFFF;
			}
		}
	.worker-wrap{
		.btn{
			width:345rpx;
		}
	}
	}
	.job-item {
			width: 650rpx;
			margin: 20rpx auto;
			background: #FFFFFF;
			border-bottom:1px solid #EEEEEE;
			padding: 30rpx 0;
			position: relative;
			box-sizing: border-box;
	
			.title {
				font-size: 34rpx;
				margin-bottom: 20rpx;
				font-weight: 700;
			}
	
			.icon-7 {
				width: 28rpx;
				height: 28rpx;
				margin-right: 10rpx;
			}
	
			.salary {
				position: absolute;
				top: 32rpx;
				right: 30rpx;
				color: #F7661E;
				font-size: 38rpx;
			}
	
			.label-wrap {
				text {
					border: 1px solid #DDDDDD;
					border-radius: 5rpx;
					padding: 10rpx;
					font-size: 20rpx;
					color: #999999;
					margin-right: 10rpx;
				}
			}
			
		}
		.job-item:last-of-type{
			border-bottom:0;
		}
	
	
	.popContent{
		width: 400rpx;
		height: 200rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
		.pop_title{
			font-size: 34rpx;
			font-family: PingFang-SC-Bold;
			font-weight: bold;
			color: #333333;
		}
		
		.pop_btn{
			width: 100%;
			box-sizing: border-box;
			padding: 0 30rpx;
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;
			
			>span:nth-child(1){
				width: 160rpx;
				height: 60rpx;
				background: #07C160;
				border-radius: 15rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				text-align: center;
				line-height: 60rpx;
			}
			
			>span:nth-child(2){
				width: 160rpx;
				height: 60rpx;
				background: #F3F3F3;
				border-radius: 15rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #999999;
				text-align: center;
				line-height: 60rpx;
			}
		}
	}
</style>

<style>
	page {
		padding: 0;
		padding-bottom: 30rpx;
	}
</style>